<template>
    <div>
        <h3>欢迎光临水果店</h3>

        <table>
            <tr>
                <th>{{ msg }}</th>
            </tr>
            <tr>
                <td>请输入你要购买的斤数<input type="number" v-model="j"></td>
            </tr>
            <tr>
                <button @click="jz">结账买单~</button>
            </tr>
            <tr>
                结账单:总价：{{ zj }}￥元，折后价：{{ zh }}￥元 省了：{{ sl }}￥元
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: '苹果10￥/斤，折扣<8折>',
                j: '',
                zj: '',
                zh: '',
                sl: ''
            }
        },
        methods: {
            jz() {
                this.zj = 10 * this.j,
                    this.zh = this.zj * 0.8,
                    this.sl = this.zj - this.zh
            }
        }
    }
</script>

<style>
    * {
        text-align: center;
    }

    table {
        margin: auto;
    }
</style>